<template>
	<div class="nineCommodityDetail">
		<div>
			<van-nav-bar fixed title="商品详情" left-text="" right-text="" left-arrow @click-left="retreat" @click-right="onClickRight" />
		</div>
		<div class="lunbo">
			<van-swipe :autoplay="3000" :height="300" indicator-color="white">
				<van-swipe-item v-for="(image, index) in commodityData.productImages" :key="index">
					<img v-lazy="image.imageUrl" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 价格 评论 -->
		<div>
			<!-- 价格 -->
			<div class="price">
				<div class="price_left">
					
				</div>
			</div>
			<div class="bg_onws ">
				<div class="sp_detone">
					<p class="sp_text">{{commodityData.name}}</p>
					<div class="pl_use" v-for="item in commodityData.repository" :key="item.id">
						<div class="pl_text">活动价</div>
						<div class="price_new">
							<!-- <div><b><span class="pl_in">￥</span><span class="pl_new">{{commodityData.price}}</span></b></div> -->
							<div><b><span class="pl_new">￥{{item.price}}</span></b></div>
						</div>
						<div class="pl_old">￥{{item.price*2}}</div>
					</div>
				</div>
				
				
				
				<div class="sp_dettwo" @click="evaluation()">
					<div class="spde_side">已有评论（{{commodityData.comment_num}}）条</div>
					<div class="spde_cont">
						<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/pl.png">
					</div>
				</div>
			</div>
			<!-- 提示 产品属性 电话-->
			<div class="bg_onw">			
				<div class="sp_detfour">
					<div class="spdd_one">
						<ul>
							<li>
								<div class="spdd_side spdd_color">温馨提示</div>
								<div class="spdd_cont"><span>为了您的权益，下单前请联系客服咨询</span></div>
							</li>
							<li>
								<div class="spdd_side spdd_color">客服电话</div>
								<div class="spdd_cont"><span>{{commodityData.customer_service_phone}}</span></div>
							</li>
						</ul>
					</div>
				</div>
				<!-- 地址 -->
				<div class="sp_detfour">
					<div class="spdd_one">
						<ul>
							<li>
								<div class="spdd_side spdd_color">发货时间</div>
								<div class="spdd_cont"><span>第七天内发货（从下单当日起）</span></div>
							</li>
							<li>
								<div class="spdd_side spdd_color">规格型号</div>
								<div class="spdd_cont">
									<span v-for="item in commodityData.repository" :key="item.id">{{item.product_detail_group_name}}</span>
									</div>
							</li>
						</ul>
					</div>
				</div>
				<div style="overflow: scroll;">
					<div class="sp_detfive">
						<div class="spd_tit">商品详情</div>
						<div id="spd_center" class="spd_center" v-html="commodityData.detail"></div>
					</div>
				</div>
			</div>
		</div>
		
		<van-goods-action>
		 <van-goods-action-icon :icon="isA?'star':'star-o'" :class="isA?'collect_lcon':''" @click="collect()" text="收藏" />
		  <van-goods-action-icon icon="shop-o" @click="ShopLink" text="店铺" />
		  <van-goods-action-icon icon="service-o"  @click="chatService()" text="聊聊" />
		  <!-- <van-goods-action-button color="#FC285D" @click="shoppingTrolley" text="加入购物车" /> -->
		  <van-goods-action-button color="#FF1B28" @click="goodsPurchase" text="立即购买" />
		</van-goods-action>
		
		<van-popup
		  v-model="show"
		  closeable
		  position="bottom"
		  :style="{ height: '50%' }"
		>
			<commdPurchase :commodityData="commodityData" :source="source"></commdPurchase>
		</van-popup>
		<loading v-show="bool"></loading>
	</div>
	<!--回到顶部-->
	<!-- <goTop></goTop> -->
</template>
<script>
	import commdPurchase from '../purchase/commdPurchase';
	import loading from '../purchase/loading.vue';
	export default {
		data() {
			// let baseJs=this.$baseJs;
			return {
				
				onClickRight() {
					// Toast('按钮');
				},
				images: [
					// this.commodityData.product_image_url
				],
				timer:0,//计时器
				hours:"00",
				minutes:"00",
				seconds:"00",
				show:false,
				bool:false,//加载框
				isA:false,//是否收藏
				source:1,//是加入购物车，还收购物
				commodityData:{},//数据
			}
		},
		created() {
			this.getCommdInfo();
		},
		methods: {
			//后退
			retreat() {
				if (window.history.length <= 1) {
					this.$router.push({path:'/'})
				} else {
					this.$router.go(-1);
				}
			},
		// 商品信息
		async getCommdInfo(){
			this.bool = true;
			let Id= this.$route.query.id;
			var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
			var userId=list.userId
			var token = localStorage.getItem('token');
			let params = {}
			if (!userId) {
			  params = {
			    goods_id:Id
			  };
			}else {
			  params = {
			    goods_id:Id,
			    user_id:userId
			  };
			}
			const res = await this.$axios.post(this.$api.goodsDetailedData, params);
			if (res.success) {
			  this.commodityData = res.data;
			  if(res.data.collection){
			    this.isA=true
			  }
			} else {
			  this.$toast(res.msg);
			}
			console.log(res)
			this.bool = false;
		},
		// 跳转店铺
		ShopLink(){
			let commodityData = this.commodityData;
		  this.$router.push({path: '/Shop', query:{name:commodityData.shop.name,shop_id:commodityData.shop.id}})
		},
		//点击收藏
		async collect() {
		  let Id= this.$route.query.id;
		  var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
		  var userId=list.userId
		  var token = this.$cookies.get("token")||localStorage.getItem('token');
		  if (!userId) {
		    localStorage.setItem('beforeLoginUrl',"ProductDetails?id="+this.$base.getQueryString("Id"));
		    this.$router.push({path:'/login'})
		  }else {
		    let params = {
		      product_id: Id,
		    };
		    const res = await this.$axios.post(this.$api.collectProductData, params);
			// console.log(res);
			  if (res.isfiag == 1) {//数据库中没有收藏,点击收藏操作
		        params = {
		          product_id: Id,
		          user_id:userId
		        };
		        res.isfiag = 1
		      } else {//数据库存在收藏,点击删除收藏操作
		        params = {
		          product_id: Id,
		          user_id:userId
		        };
		        res.isfiag = 0
		      }
			  const res1 = await this.$axios.post(this.$api.collectProductData, params);
			  this.$toast(res1.msg);
			  if(!res.isfiag){this.isA = !this.isA}
		    }
		},
		
		countDown(h, mm) {
			let date = new Date();
			var future = new Date(
			date.getFullYear(),
			date.getMonth()+1, date.getDate(), h, mm);
			// 间隔时间毫秒转成秒
			var remTime = (future - date) / 1000;
			
			// 先算出剩余时间有多少小时，这些小时有多少个24小时 不满24小时的及为剩余多少小时
			this.hours = parseInt(remTime / 60 / 60 % 24);
			// 换算 多少分钟 满足60分的为小时数 不满60分的及为剩余分钟数
			this.minutes = parseInt(remTime / 60 % 60);
			// 满足60秒的为分钟数 不满60秒的及为剩余秒数
			this.seconds = parseInt(remTime % 60);
			//判断总的秒数是否小于=0 是则结束定时器
			if (remTime <= 0) { return remTime;}
			// console.log(this.hours, this.minutes, this.seconds);
		},
		// 设置定时器
		startTimer(){
			this.timer = setInterval(()=> {
				this.commodityData.seckTime=""
				var curTime = this.countDown(this.commodityData.seckTime, 0);
				if (curTime <= 0) {
					clearInterval(this.timer);
					this.timer = null;
				}
			}, 1000);
		},
		//购买
		goodsPurchase(){
			this.show=true;
			this.source=1;
		},
		//购物车
		shoppingTrolley(){
			this.show=true;
			this.source=0;
		},
		//聊天服务
		chatService(){
			this.$toast('暂未开通此功能')
		},
		//评论
		evaluation(){
			let commodityData = this.commodityData;
		  this.$router.push({path: '/Commodity_evaluations', query:{id:commodityData.id}})
		},
	},
		
		mounted() {
			this.startTimer();
			console.log(5555)
		},
		components: {
			commdPurchase,
			loading
		},


	}
</script>
<!--<style lang="scss" scoped> -->
<style lang="scss">
	.nineCommodityDetail{
		//headr头
		.van-nav-bar{
			background: #fff;
			.van-nav-bar__title{
				color:#333333;
			}
			.van-icon{
				color:#333333;
			}
		}
	}
	
	
	
	.price{
		width: 100%;
		display: flex;
	}
	.lunbo {
		margin-top: 40px;
		img {
			width: 100%;
			height: 100%;
		}
	}
// 提示 产品属性 电话
	.bg_onws {
		padding-bottom: 2%;
		background: #f7f7f7;
		.pricer_right{
			width: 30%;
		}
		.pl_in{
			font-size: 12px;
			font-weight: 100;
		}
		
		.pl_use{
			color:#141414;
			display: flex;
			align-items:baseline;
			.pl_text{
				background: #FF1B32;
				border-radius: 4px;
				display: inline-block;
				font-size: 0.628em;
				padding:4px 11px;
				color: #F7F7F7;
				font-weight: 600;
				margin-right: 6px;
			}
			.pl_new{
				font-size: 19px;
				font-weight: bold;
				margin-right: 6px;
				color: #FF1B32;
			}
			.pl_old{
				vertical-align:bottom;
				text-decoration:line-through;
				display: inline-block;
				margin-left:5px;
				font-size: 12px;
				line-height: 21px;
				color: #999999;
			}
		}

		.sp_detone {
			padding: 1% 4% 1% 2%;
			background: #fff;
			margin-bottom: 2%;
			text-align: left;
		}

		.sp_text {
			color:#141414;
			font-size: 14px;
		}
	}

	.sp_dettwo {
		background: #fff;
		overflow: hidden;
		font-size: 0;

		.spde_side {
			color: #333;
			font-size: 13px;
			margin: 7px;
			float: left;
		}

		.spde_cont {
			float: right;
			margin-right: 10px;
		}

		.spde_cont img {
			width: 10px;
			padding-top: 7px;
		}
	}
	
	.bg_onw  {
	    padding-bottom: 60px;
	    background: #f7f7f7;
	}
	
	.spdd_color{
		color: rgb(182,182,182);
	}
	//发货
	.sp_detfour   {
	    background: #fff;
	    padding: 1% 4% 1% 2%;
		margin-bottom: 2%;
		.spdd_one{
		    overflow: hidden;
		}
		.spdd_one ul li{
		    list-style-type: none;
		    float: left;
		    font-size: 12px;
		    width: 100%;
		    padding: 5px 0;
			text-align: left;
		}
		
		.spdd_side   {
		    width: 15%;
		    float: left;
		}
		.spdd_cont   {
		    color: #333;
		    margin-left: 2%;
		    width: 83%;
		    float: right;
		}
		.spdd_cont span   {
		    padding-right: 10px;
		}
	}
	
	//产品详情
	.sp_detfive{
		background: #fff;
		padding: 1% 4% 1% 2%;
		margin-bottom: 2%;
		.spd_tit{
			font-size: 14px;
			text-align: left;
		}
		.spd_center{
			font-size: 13px;
			img{
				width:100%;
			}
		}
	}
	
	.van-goods-action-button--first,.van-goods-action-button--last {
		border-radius:0px;
	}
	.van-nav-bar .van-icon{
		color: #000;
	}
	p {
		margin: 4px 0;
	}
	
	
	
		
</style>
